/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
  /* --vp-c-brand-1: #646cff; https://github.com/vuejs/vitepress/pull/2797 */
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-lightest: #bcc0ff;
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #bd34fe 30%,
    #41d1ff
  );

  /* --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #bd34fe 50%,
    #47caff 50%
  );
  --vp-home-hero-image-filter: blur(40px); */
}

/* @media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
} */

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * VitePress: Custom fix
 * -------------------------------------------------------------------------- */

/*
  Use lighter colors for links in dark mode for a11y.
  Also specify some classes twice to have higher specificity
  over scoped class data attribute.
*/
.dark .vp-doc a,
.dark .vp-doc a > code,
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
.dark .link.link:hover,
.dark .link.link.active,
.dark .edit-link-button.edit-link-button,
.dark .pager-link .title {
  color: var(--vp-c-brand-lighter);
}

.dark .vp-doc a:hover,
.dark .vp-doc a > code:hover {
  color: var(--vp-c-brand-lightest);
  opacity: 1;
}

/* Transition by color instead of opacity */
.dark .vp-doc .custom-block a {
  transition: color 0.25s;
}

.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
  max-width: 124px;
}

.VPImage.logo {
  margin-right: 0;
}

.VPImage.image-src {
  max-width: 460px;
}

@media screen and (max-width: 640px) {
  .VPImage.image-src {
    max-width: 320px !important;
  }
}

.vp-doc h1 {
  margin: 0 0 1rem;
}

.vp-doc h2 {
  margin: 32px 0 8px 0;
  border-top: none;
  /* padding-top: 0; */
  /* opacity: 0.8; */
  font-size: 22px;
}

.vp-doc h2 + div[class*="language-"] {
  margin-top: 10px;
}

.vp-doc h3 + div[class*="language-"] {
  margin-top: 10px;
}

.aside {
  width: 220px !important;
}

.vp-doc .container,
.vp-doc .content {
  max-width: 900px !important;
}

.VPContentDoc .container {
  place-content: space-around !important;
}

.home h2 {
  margin-top: 2rem;
  font-size: 1.35rem;
  border-bottom: none;
  margin-bottom: 0;
}

.outline-marker {
  width: 4px !important;
  height: 20px !important;
  border-radius: 4px !important;
  left: 5px !important;
}

.VPDocAsideOutline .content {
  border-left: none !important;
}

.VPDocAsideOutline .outline-link.active {
  color: var(--vp-c-brand-1) !important;
}

.vp-doc p,
.vp-doc summary {
  opacity: 0.8 !important;
}

.custom-block.tip {
  color: var(--vp-c-brand);
}

/* 覆盖naive-ui样式 */
.n-gradient-text {
  white-space: inherit;
}

.github-release-tag {
  font-size: 14px;
  font-weight: bold;
  padding: 4px 6px;
  margin-left: 6px;
  background: var(--vp-c-brand);
  color: white;
  border-radius: 10px;
  vertical-align: middle;
}

.pureadminutils-outline-label-num {
  font-size: 12px;
  font-weight: bold;
  padding: 4px;
  margin-left: 4px;
  border: 0.4px solid var(--vp-custom-block-tip-border);
  background: var(--vp-custom-block-tip-bg);
  color: var(--vp-c-brand-1);
  border-radius: 6px;
  vertical-align: middle;
}

/* markdown table */
.pure-border {
  border: 1px solid var(--pure-table-border-color);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}
.pure-border th,
.pure-border tr,
.pure-border td,
.pure-no-border th,
.pure-no-border tr,
.pure-no-border td {
  border: none;
}
.pure-border thead,
.pure-border tbody,
.pure-no-border thead,
.pure-no-border tbody {
  border: 1px solid var(--pure-table-border-color);
}
table tbody tr {
  background: transparent !important;
}
table tbody tr:hover {
  background: var(--vp-c-bg-soft) !important;
}

.VPSidebarItem.level-1.is-link {
  padding: 0 10px;
  border-radius: 8px;
}
.VPSidebarItem.level-1.is-link.is-active.has-active {
  transition: all 0.3s ease;
  background: rgba(100, 108, 255, 0.12);
}
.VPSidebarItem.level-1.is-link p {
  transition: all 0.4s ease;
}
.VPSidebarItem.level-1.is-link.is-active.has-active p {
  font-size: 0.95rem;
  padding-left: 0.5rem;
}

/* component preview-image */
.PhotoSlider__BannerRight > svg:first-child {
  display: none !important;
}
